import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
import GoodsItem from './components/GoodsItem.vue';
import Buyer from './components/Buyer.vue';
import { h } from 'vue';
import { Input, InputGroup, Select, TabPane, Tabs, Tag } from 'ant-design-vue';
import { PayTypeEnum, PayTypeColorEnum, DeliveryTypeEnum, PayStatusEnum, OrderStatusEnum, ThirdDeliverStatusEnum, DeliveryStatusEnum, ReceiptStatusEnum, OrderSourceEnum } from '/@/common/enum/order';
import { storeDetail } from '/@/api/store';


// table表格 数据
export const columns: BasicColumn[] = [
  {
    title: '商品',
    dataIndex: 'goods',
    slots: { title: 'customGoods', customRender: 'goods' },
    width: 100,
    customRender: ({ record }) => {
      if (!Reflect.has(record, 'pendingStatus')) {
        record.pendingStatus = false;
      }
      return record.goods.map(goods => h(GoodsItem, {
        goods
      }))
    },
  },
  {
    title: '实付款',
    dataIndex: 'total_price',
    width: 100,
    align: 'left',
    slots: { title: 'customPrice', customRender: 'price' },
    customRender: ({ record }) => {
      if (!Reflect.has(record, 'pendingStatus')) {
        record.pendingStatus = false;
      }
      return h('div', {
        style: {
          whiteSpace: 'pre-line'
        }
      }, `￥${record.total_price}\n(含运费：￥${record.express_price})`)
    },
  },
  {
    title: '买家',
    dataIndex: 'user',
    width: 100,
    align: 'left',
    slots: { title: 'customUser', customRender: 'user' },
    customRender: ({ record }) => {
      if (!Reflect.has(record, 'pendingStatus')) {
        record.pendingStatus = false;
      }
      return h(Buyer, {
        buyer: record.user
      });
    },
  },
  {
    title: '支付方式',
    dataIndex: 'role',
    width: 100,
    slots: { title: 'customPayType', customRender: 'PayType' },
    customRender: ({ record }) => {
      return h(Tag, {
        color: PayTypeColorEnum[record.pay_type].name,
      }, () => PayTypeEnum[record.pay_type].name);
    },
  },
  {
    title: '交易状态',
    dataIndex: 'order_status',
    width: 150,
    align: 'left',
    slots: { title: 'customStatus', customRender: 'status' },
    customRender: ({ record }) => {

      if (!Reflect.has(record, 'pendingStatus')) {
        record.pendingStatus = false;
      }

      const { pay_status, delivery_type, delivery_status, receipt_status, delivery_time, order_status } = record;

      // 付款状态
      const PayTag = () => h(Tag, {
        color: pay_status == PayStatusEnum['SUCCESS'].value ? 'green' : '',
      }, () => PayStatusEnum[pay_status].name);
      const payStatusArr = ['付款状态：', PayTag()]
      // 配送/发货 状态
      const isDelivery = delivery_type === DeliveryTypeEnum['THIRD'].value
      const deliveryColor = isDelivery ? (delivery_status === ThirdDeliverStatusEnum['COMPLETE'].value ? 'green' : '')
        : (delivery_status == DeliveryStatusEnum['DELIVERED'].value ? 'green' : '')
      const deliveryText = isDelivery ? ThirdDeliverStatusEnum[delivery_status].name : DeliveryStatusEnum[delivery_status].name
      const DeliveryTag = () => h(Tag, {
        style: {
          marginTop: '5px'
        },
        color: deliveryColor,
      }, () => deliveryText);
      const showDelivery = delivery_type !== DeliveryTypeEnum['PICKUP'].value && pay_status !== OrderStatusEnum['CANCELLED'].value
      const deliveryTitle = delivery_type === DeliveryTypeEnum['THIRD'].value ? '配送状态' : '发货状态';
      const deliveryStatusArr = showDelivery ? [`\n${deliveryTitle}：`, DeliveryTag()] : []
      // 收货状态
      const ReceiptTag = () => h(Tag, {
        style: {
          marginTop: '5px'
        },
        color: receipt_status == ReceiptStatusEnum['RECEIVED'].value ? 'green' : '',
      }, () => PayStatusEnum[pay_status].name);
      const showReceipt = delivery_type !== DeliveryTypeEnum['PICKUP'].value && pay_status !== OrderStatusEnum['CANCELLED'].value
      const receiptStatusArr = showReceipt ? ['\n收货状态：', ReceiptTag()] : []

      // 订单状态
      const orderStatusColor = {
        [OrderStatusEnum['NORMAL'].value]: '',
        [OrderStatusEnum['CANCELLED'].value]: 'red',
        [OrderStatusEnum['APPLY_CANCEL'].value]: 'red',
        [OrderStatusEnum['COMPLETED'].value]: 'green',
      }
      const OrderTag = () => h(Tag, {
        style: {
          marginTop: '5px',
          marginBottom: '5px'
        },
        color: orderStatusColor[order_status],
      }, () => OrderStatusEnum[order_status].name);
      const orderStatusArr = ['\n订单状态：', OrderTag()]
      // 判断状态内容
      return h('div', {
        style: {
          whiteSpace: 'pre-line'
        },
      }, [...payStatusArr, ...deliveryStatusArr, ...receiptStatusArr, ...orderStatusArr, `\n约单时间：${delivery_time || '立即'}`])
    },
  },
  {
    title: '创建时间',
    dataIndex: 'create_time',
    width: 100,
  },
];



// 表格搜索类型
const allType = { value: -1, label: "全部" }
// 通过枚举获取选择框的值
const getTypeByEnum = (data) => data.data.map(v => {
  return {
    label: v.name,
    ...v
  }
})

export const SearchType = [
  { label: '订单号', value: 10 },
  { label: '会员昵称', value: 20 },
  { label: '会员ID', value: 30 },
]

export let tabs = [{
  label: '全部订单',
  value: 'all',
},
{
  label: '待发货',
  value: 'delivery',
},
{
  label: '取货中',
  value: 'pickup',
},
{
  label: '配送中',
  value: 'distribution',
},
{
  label: '待收货',
  value: 'receipt',
},
{
  label: '待付款',
  value: 'pay',
},
{
  label: '已完成',
  value: 'complete',
},
{
  label: '已取消',
  value: 'cancel',
}]
let reload = () => { }
let getStoreInfo = async () => {
  const data = await storeDetail()
  let { storeInfo: { is_o2o } } = data
  let o2oKeys = ['pickup', 'distribution']
  tabs = is_o2o
    ? tabs.filter((v) => v.value !== 'receipt')
    : tabs.filter((v) => !o2oKeys.includes(v.value))

}

getStoreInfo()
// 表格搜索框
export const searchFormSchema: FormSchema[] = [
  {
    field: 'dataType',
    label: '',
    defaultValue: 'all',
    component: 'Input',
    colProps: { span: 24, offset: 0 },
    // componentProps
    render: ({ model, field }) => {
      return h(Tabs, {
        activeKey: model[field],
        onTabClick: (e: ChangeEvent) => {
          model[field] = e;
          reload()
        },
      },
        () => tabs.map(v => h(TabPane, {
          key: v.value,
          tab: v.label
        })))
      // () => {

      //   storeDetail().then(res => {
      //     console.log(res)
      //   })
      //   let { storeInfo: { is_o2o } } = data
      //   let o2oKeys = ['pickup', 'distribution']
      //   let newTabs = is_o2o
      //     ? tabs.filter((v) => v.value !== 'receipt')
      //     : tabs.filter((v) => !o2oKeys.includes(v.value))
      //   console.log(newTabs)
      //   return tabs.map(v => h(TabPane, {
      //     key: v.value,
      //     tab: v.label
      //   }))
      // })
    },
  },
  {
    field: 'searchType',
    label: '搜索类型',
    component: 'Input',
    labelWidth: 70,
    colProps: { span: 3 },
    defaultValue: 10,
    ifShow: false,

    slot: "search"
  },
  {
    field: 'searchValue',
    label: '关键字',
    component: 'Input',
    labelWidth: 70,
    colProps: { span: 7 },
    render: ({ model, field }) => {
      return h(InputGroup, {
        compact: true,
        value: '',
        style: 'display:flex;flex-direction: row;'
      }, () => [
        // select组件
        h(Select, {
          style: 'width:150px;',
          value: model['searchType'],
          options: SearchType,
          onChange: (e: ChangeEvent) => {
            model['searchType'] = e;
          },
        }),
        // input组件
        h(Input, {
          value: model[field],
          placeholder: "请输入关键字",
          onChange: (e: ChangeEvent) => {
            model[field] = e.target.value;
          },
        })]);
    },
  },
  {
    field: 'orderSource',
    label: '订单来源',
    component: 'Select',
    defaultValue: -1,
    componentProps: ({ tableAction }) => {
      reload = tableAction.reload;
      return { options: [allType, ...getTypeByEnum(OrderSourceEnum)] }
    },
    labelWidth: 100,
    colProps: { span: 5 },
  },
  {
    field: 'payType',
    label: '支付方式',
    component: 'Select',
    defaultValue: -1,
    componentProps: {
      options: [allType, ...getTypeByEnum(PayTypeEnum)],
    },
    labelWidth: 100,
    colProps: { span: 5 },
  },
  {
    field: 'deliveryType',
    label: '配送方式',
    component: 'Select',
    defaultValue: -1,
    componentProps: {
      options: [allType, ...getTypeByEnum(DeliveryTypeEnum)],
    },
    labelWidth: 100,
    colProps: { span: 5 },
  },
  {
    field: 'betweenTime',
    label: '下单时间',
    component: 'RangePicker',
    componentProps: {
      dateFormatList: ['DD-MM-YYYY', 'DD-MM-YY'],
      valueFormat: 'DD-MM-YYYY'
    },
    labelWidth: 70,
    colProps: { span: 7 }
  },




  // {
  //   field: 'goodsNo',
  //   label: '商品编码',
  //   component: 'Input',
  //   colProps: { span: 5 },
  // },
  // {
  //   field: 'status',
  //   label: '商品分类',
  //   component: 'Select',
  //   componentProps: {
  //     options: [
  //       { label: '上 架', value: '0' },
  //       { label: '下 架', value: '1' },
  //     ],
  //   },
  //   colProps: { span: 5 },
  // }
];



